import type { MenuProps } from 'antd';
import type { ReactNode, Key } from 'react';
import {
  HomeOutlined,
  CompassOutlined,
  HistoryOutlined,
  StarOutlined,
  HeartOutlined,
  // LikeOutlined,
  // SettingOutlined,
  ClockCircleOutlined,
  BookOutlined,
} from '@ant-design/icons';

export type MenuItemT = Required<MenuProps>['items'][number];

const getItem = (label: ReactNode, key: Key, icon?: ReactNode, children?: MenuItemT[]): MenuItemT => {
  return {
    key,
    icon,
    label,
    children,
  } as MenuItemT;
};

export const list = ['首页', '探索', '订阅', '图书馆', '历史', '稍后再看', '喜欢的视频'];
export const menuIconSize: string = '20px';
const menuList: MenuItemT[] = [
  getItem('首页', '1', <HomeOutlined style={{ fontSize: menuIconSize }} />),
  getItem('探索', '2', <CompassOutlined style={{ fontSize: menuIconSize }} />),
  getItem('订阅', '3', <StarOutlined style={{ fontSize: menuIconSize }} />),
  getItem('图书馆', '4', <BookOutlined style={{ fontSize: menuIconSize }} />),
  getItem('历史', '5', <HistoryOutlined style={{ fontSize: menuIconSize }} />),
  getItem('稍后再看', '6', <ClockCircleOutlined style={{ fontSize: menuIconSize }} />),
  getItem('喜欢的视频', '7', <HeartOutlined style={{ fontSize: menuIconSize }} />),
];
export default menuList;
